<template>
    <div class="top-box">
        <el-row v-if="data">
            <el-col :span="6">
                <text class="title">三级部件</text>
                <text class="content">{{ name }}</text>
            </el-col>
            <el-col :span="6">
                <text class="title">二级设备</text>
                <text class="content">{{ data.secondName }}</text>
            </el-col>
            <el-col :span="6">
                <text class="title">一级设备</text>
                <text class="content">{{ data.firstName }}</text>
            </el-col>
            <el-col :span="6">
                <text class="title">检查项数</text>
                <text class="content">{{ data.total }}个</text>
            </el-col>
        </el-row>
    </div>
    <div class="notice-list" v-loading="loading" style="height: calc(100% - 79px)">
        <common-list @resert="resert" ref="commonListRef">
            <template #operate="{ scope }">
                <el-button link type="primary" size="small" @click="openDialogVisibles(scope)">编辑</el-button>
                <div class="line" />
                <el-button link type="primary" size="small" @click="deletes(scope)">删除</el-button>
            </template>
            <template #btns>
                <div class="btns">
                    <el-button type="primary" @click="toCheckItemDetails" class="add-btn">新增检查项</el-button>
                    <w-button @click="allDeletes" class="config-btn">批量删除</w-button>
                </div>
            </template>
        </common-list>
        <el-dialog destroy-on-close v-model="dialogVisibles" title="编辑检查项" :close-on-click-modal="false" width="30%">
            <el-form :model="form" :rules="rules" hide-required-asterisk ref="ruleFormRef" label-width="68px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="检查项" prop="itemName">
                            <el-input maxlength="30" v-model="form.itemName" placeholder="请输入检查项" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="检查结果" prop="inspectionResult">
                            <el-select v-model="form.inspectionResult" placeholder="请选择检查结果" style="width: 100%">
                                <el-option v-for="item in resultOption" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="处置方式" prop="disposalMethod">
                            <el-select v-model="form.disposalMethod" placeholder="请选择处置方式" style="width: 100%">
                                <el-option v-for="item in methodOption" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="button">
                    <div class="submit" @click="submit">
                        <text class="submitText">确认</text>
                    </div>
                    <div class="close" @click="close">
                        <text class="closeText">取消</text>
                    </div>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { provide, reactive, ref, computed } from "vue";
import { tableConfig, rules } from "./checkItemDetailsConfig";
import {
    batchdeleteinspectionitem,
    editinspectionitem,
    getinspectionitempagebytemplate,
    getinspectionitemdisposalmethodlist,
    getinspectioniteminspectionresultlist
} from "@/service/api/tacticalManagement.js";
import wButton from "@/components/wButton.vue";
import { useRouter } from "vue-router";

const router = useRouter();
const id = computed(() => router.currentRoute.value.query.id);
const name = computed(() => router.currentRoute.value.query.name);
const commonListRef = ref(null);
const formData = reactive({ templateId: id.value });
const data = ref();
const equipmentData = ref();
const dialogVisibles = ref(false);
const resultOption = ref([]);
const methodOption = ref([]);
const form = ref();
const ruleFormRef = ref(null);

getinspectionitempagebytemplate({ templateId: id.value }).then((res) => {
    if (res.code === 200) {
        data.value = res.data;
    }
});
getinspectioniteminspectionresultlist().then((res) => {
    if (res.code === 200) {
        resultOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});
getinspectionitemdisposalmethodlist().then((res) => {
    if (res.code === 200) {
        methodOption.value = res.data.map((item) => ({ label: item.name, value: item.value }));
    }
});

const close = () => {
    dialogVisibles.value = false;
};
const openDialogVisibles = (scope) => {
    form.value = {
        id: scope.scope.row.id,
        itemName: scope.scope.row.itemName,
        inspectionResult: scope.scope.row.inspectionResult,
        disposalMethod: scope.scope.row.disposalMethod
    };
    dialogVisibles.value = true;
};

const submit = () => {
    if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid) => {
        if (valid) {
            const loadingInstance = ElLoading.service();
            editinspectionitem(form.value)
                .then((res) => {
                    if (res.code === 200) {
                        ElMessage({
                            message: "修改成功",
                            type: "success"
                        });
                        dialogVisibles.value = false;
                    }
                    commonListRef.value.tableRef.getTableList();
                    loadingInstance.close();
                })
                .catch(() => {
                    loadingInstance.close();
                });
        }
    });
};
const resert = () => {
    Object.keys(formData).forEach((key) => {
        if (key !== "Id") {
            formData[key] = "";
        }
    });
};

const toCheckItemDetails = () => {
    equipmentData.value = {
        thirdName: name.value,
        secondName: data.value.secondName,
        firstName: data.value.firstName
    };
    router.push("/main/tacticalManagement/checkTheEntry?id=" + id.value + "&data=" + encodeURIComponent(JSON.stringify(equipmentData.value)));
};

const allDeletes = () => {
    const choose = commonListRef.value.tableRef.allSelectTable.flat().map((item) => item.id);
    if (choose.length == 0) {
        ElMessage({
            message: "请选中需要删除的数据再进行批量删除",
            type: "warning"
        });
        return;
    }
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchdeleteinspectionitem({
            ids: choose
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }
                getinspectionitempagebytemplate({ id: id.value }).then((res) => {
                    if (res.code === 200) {
                        data.value = res.data;
                    }
                });
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
const deletes = (scope) => {
    ElMessageBox.confirm("确定删除吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: ""
    }).then(() => {
        const loadingInstance = ElLoading.service();
        batchdeleteinspectionitem({
            ids: [scope.scope.row.id]
        })
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        type: "success",
                        message: "删除成功"
                    });
                }
                getinspectionitempagebytemplate({ id: id.value }).then((res) => {
                    if (res.code === 200) {
                        data.value = res.data;
                    }
                });
                commonListRef.value.tableRef.getTableList();
                loadingInstance.close();
            })
            .catch(() => {
                loadingInstance.close();
            });
    });
};
provide("formData", formData);
provide("tableConfig", tableConfig);
provide("apiFn", getinspectionitempagebytemplate);
// provide("requestBody", "query");
provide("title", "检查项明细");
</script>

<style lang="less" scoped>
::v-deep(.cell .el-button span) {
    font-size: 14px;
}
::v-deep(.el-dialog__title) {
    color: #1b3646;
    font-weight: 600;
}
::v-deep(.el-form-item__label) {
    color: #1b3646;
}
.button {
    display: flex;
    justify-content: center;
}
.close {
    margin-left: 8px;
    width: 78px;
    height: 30px;
    border: 1px solid #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.closeText {
    color: #00428e;
    font-size: 14px;
    font-weight: 400;
}
.submit {
    width: 80px;
    height: 32px;
    background: #00428e;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.submitText {
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
}
.top-box {
    padding: 22px 13px;
    background-color: #fff;
    margin-bottom: 16px;
    .title {
        font-size: 14px;
        font-weight: 400;
        color: #1b3646;
    }
    .content {
        font-size: 14px;
        font-weight: 400;
        color: #595959;
        padding-left: 16px;
    }
}
.notice-list {
    .line {
        display: inline-block;
        margin: 0 13px;
        width: 1px;
        height: 8px;
        border: 1px solid #dcdcdc;
    }
    .btns {
        display: flex;
        .add-btn,
        .config-btn {
            width: 106px;
            height: 32px;
        }
    }
}
</style>
<style>
.el-message-box__btns {
    justify-content: center;
}
.el-message-box__title {
    font-weight: 600;
    color: #1b3646;
}
.el-message-box__message {
    color: #1b3646;
}
.el-message-box__btns .el-button--primary {
    background-color: #00428e;
}
</style>
